
import 'package:example/pages/appbar_title_page.dart';
import 'package:example/pages/avatar_page.dart';
import 'package:example/pages/badge_page.dart';
import 'package:example/pages/button_page.dart';
import 'package:example/pages/empty_page.dart';
import 'package:example/pages/list_page.dart';
import 'package:example/r.dart';
import 'package:flutter/material.dart';

import 'pages/toast_page.dart';

class HomePage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return HomePageState();
  }
}

class HomePageState extends State<HomePage> {

  List<_TLDemoListData> get _demoList {
    return [
      _TLDemoListData(
          title: 'Avatar',
          picPath: R.assetsImagesAvatar,
          darkPicPath: R.assetsImagesAvatarDark,
          imgWidth: 70,
          imgHeight: 70,
          targetRouteName: AvatarPage.routeName),
      _TLDemoListData(
          title: 'Badge',
          picPath: R.assetsImagesBadge,
          darkPicPath: R.assetsImagesBadgeDark,
          imgWidth: 70,
          imgHeight: 70,
          targetRouteName: BadgePage.routeName),
      _TLDemoListData(
        title: "Button",
        picPath: R.assetsImagesButton,
        darkPicPath: R.assetsImagesButtonDark,
        imgWidth: 110,
        imgHeight: 50,
        targetRouteName: ButtonPage.routeName,
      ),
      _TLDemoListData(
          title: 'Empty',
          picPath: R.assetsImagesEmpty,
          darkPicPath: R.assetsImagesEmptyDark,
          imgWidth: 70,
          imgHeight: 70,
          targetRouteName: EmptyPage.routeName),
      _TLDemoListData(
          title: 'AppBar',
          picPath: R.assetsImagesNavi,
          darkPicPath: R.assetsImagesNaviDark,
          imgWidth: 120,
          imgHeight: 50,
          targetRouteName: AppBarPage.routeName),
      _TLDemoListData(
          title: 'List',
          picPath: R.assetsImagesList,
          darkPicPath: R.assetsImagesListDark,
          imgWidth: 70,
          imgHeight: 70,
          targetRouteName: ListPage.routeName),
      _TLDemoListData(
          title: 'Toast',
          picPath: R.assetsImagesToast,
          darkPicPath: R.assetsImagesToastDark,
          imgWidth: 100,
          imgHeight: 65,
          targetRouteName: ToastPage.routeName),
      _TLDemoListData(
          title: 'Bubble',
          picPath: R.assetsImagesBubble,
          darkPicPath: R.assetsImagesBubbleDark,
          imgWidth: 120,
          imgHeight: 58,
          targetRouteName: ''),
      _TLDemoListData(
          title: 'Input',
          picPath: R.assetsImagesInput,
          darkPicPath: R.assetsImagesInputDark,
          imgWidth: 110,
          imgHeight: 50,
          targetRouteName: ''),
      _TLDemoListData(
          title: 'BottomSheet',
          picPath: R.assetsImagesSheet,
          darkPicPath: R.assetsImagesSheetDark,
          imgWidth: 100,
          imgHeight: 65,
          targetRouteName: ''),
    ];
  }

  List<Widget> get _demoCards {
    bool isDarkMode = Theme.of(context).brightness == Brightness.dark;
    List<Widget> list = [];
    for (_TLDemoListData demoData in _demoList) {
      Widget card = Card(
        clipBehavior: Clip.antiAlias,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.all(Radius.circular(5)),
        ),
        elevation: 1,
        child: InkWell(
          onTap: () {
            if(demoData.targetRouteName.isNotEmpty) {
              Navigator.pushNamed(context, demoData.targetRouteName);
            }
          },
          splashColor: Theme.of(context).colorScheme.onSurface.withOpacity(0.12),
          highlightColor: Colors.transparent,
          child: Stack(
            children: <Widget>[
              Positioned(
                left: 10,
                right: 10,
                top: 15,
                bottom: 55,
                child: Center(
                  child: Image.asset(isDarkMode ? demoData.darkPicPath : demoData.picPath, width: demoData.imgWidth, height: demoData.imgHeight, scale: 1.8,),
                ),
              ),
              Positioned(
                left: 10,
                right: 10,
                bottom: 20,
                child: Text(demoData.title, style: TextStyle(fontSize: 15.0), textAlign: TextAlign.center,),
              )
            ],
          ),
        ),
      );
      list.add(card);
    }
    return list;
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    bool isDarkMode = Theme.of(context).brightness == Brightness.dark;
    Color bgColor = Theme.of(context).backgroundColor;
    return Scaffold(
      appBar: AppBar(
        title: Text('TLUI', style: TextStyle(letterSpacing: 4),),
        centerTitle: true,
      ),
      body: Container(
        padding: EdgeInsets.symmetric(horizontal: 20),
        color: isDarkMode ? bgColor : Color(0xfffcfcfc),
        child: GridView(
          padding: EdgeInsets.symmetric(vertical: 20),
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2,
          childAspectRatio: 9 / 8,
          mainAxisSpacing: 20,
          crossAxisSpacing: 20),
          children: _demoCards,
        ),
      ),
    );
  }

}

class _TLDemoListData {
  const _TLDemoListData({
    this.title,
    this.picPath,
    this.darkPicPath,
    this.imgWidth,
    this.imgHeight,
    this.targetRouteName,
  });

  final String title;
  final String picPath;
  final String darkPicPath;
  final double imgWidth;
  final double imgHeight;
  final String targetRouteName;
}